<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--在自定义标签里面的内容都会放到匿名插槽的位置-->
  <my-dialog>
    <form action="">
      用户名：<input type="text"> <br>
      密码：<input type="password">
    </form>
  </my-dialog>
</div>


<template id="my-dialog">
  <div>
    <div>
      对话框头部
    </div>

    <div>
      <div>11111</div>
      <!--没有指定特别的名字，这个slot称为匿名插槽-->
      <slot>主体</slot>
      <div>22222</div>
    </div>

    <div>
      对话框底部
    </div>
  </div>
</template>
<script src="js/vue.js"></script>
<script>
  Vue.component("my-dialog", {
    template: '#my-dialog'
  })

  var vm = new Vue({
    el: "#app"
  });
</script>
</body>
</html>
